<template>
  <div class="m-login-mask">
    <div class="mask-center-box">
      <div class="box-left">
        <div class="title">欢迎登陆</div>
        <div class="line"></div>
        <img v-if="isLogin" class="login-img" src="../assets/img/regsterbg.png" alt="login">
        <img v-else class="register-img" src="../assets/img/loginbg.png" alt="login">
      </div>
      <div class="box-right">
        <img class="logo" src="../assets/img/logo_dialog.png" alt="logo">
        <div class="close" @click="close">
          <img src="../assets/img/close.png" alt="close">
        </div>
        <!-- 登录信息 -->
        <div v-if="isLogin">
          <div class="input-item">
            <div class="label">邮箱</div>
            <input type="text" placeholder="邮箱地址" v-model="loginInfo.email">
          </div>
          <div class="input-item">
            <div class="label">密码</div>
            <input type="password" placeholder="密码" v-model="loginInfo.password">
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox" v-model="loginInfo.check">
              <div class="icon-check"></div>
              <span>记住密码</span>
            </label>
          </div>
          <button class="button_login" :disabled="loginInfo.disabled">登录</button>
          <div class="to_register">
            还没有账户?
            <span @click="isLogin=false">点击注册</span>
          </div>
        </div>
        <!-- 注册信息 -->
        <div v-else>
          <div class="input-item">
            <div class="label">邮箱</div>
            <input type="text" placeholder="邮箱地址" v-model="registerInfo.email">
          </div>
          <div class="input-item">
            <div class="label">密码</div>
            <input type="password" placeholder="密码" v-model="registerInfo.password">
          </div>
          <div class="input-item">
            <div class="label">确认密码</div>
            <input type="password" placeholder="确认密码" v-model="registerInfo.passwordConfirm">
          </div>
          <div class="checkbox" style="text-align:left">
            <label>
              <input type="checkbox" v-model="registerInfo.check">
              <div class="icon-check"></div>
              <span>
                我已阅读并接受
                <a href="javascript:;">用户协议</a>
              </span>
            </label>
          </div>
          <button class="button_login button_register" :disabled="registerInfo.disabled">注册</button>
          <div class="to_register">
            已有账户?
            <span @click="isLogin=true">点击登录</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: true,
      loginInfo: {
        email: "",
        password: "",
        check: false,
        disabled: true
      },
      registerInfo: {
        email: "",
        password: "",
        passwordConfirm: "",
        check: false,
        disabled: true
      }
    };
  },

  watch: {
    registerInfo: {
      handler(val) {
        val.check
          ? (this.registerInfo.disabled = false)
          : (this.registerInfo.disabled = true);
      },
      deep: true
    }
  },

  methods: {
    close() {
      this.$emit("close", false);
    }
  }
};
</script>

<style lang="scss">
@import "../assets/style/login.scss";
</style>

